<template>
	<view class="panel">
		<h2 class="title">功能专区</h2>
		<view class="body">
			<view class="section bg-mercari" @click="toPlatform('mercari')"></view>
			<view class="section bg-pre" @click="toPlatform('pre')"></view>
			<view class="section bg-colleize" @click="toPlatform('colleize')"></view>
			<view class="section bg-out" @click="toPlatform('out')"></view>
		</view>
	</view>
</template>

<script setup>
import sheep from "@/sheep";
import {computed} from "vue";

const props = defineProps({
	platformList: {
		type: Array,
		default() {
			return [];
		},
	},
});

const filteredPlatformList = computed(() => {
	return props.platformList.filter(item => ['Colleize', '外部链接', '煤炉', '预售'].includes(item.name));
});

function toPlatform(type) {
	switch (type) {
		case 'colleize':
			// colleize
			sheep.$router.go('/pages/goods/list', { platform: 13 });
			break;
		case 'mercari':
			// mercari
			sheep.$router.go('/pages/goods/list', { platform: 0 });
			break;
		case 'out':
			// 外部链接
			sheep.$router.go('/pages/order/addOrder');
			break;
		case 'pre':
			// 预售商品
			sheep.$helper.toast('暂未开放')
			// sheep.$router.go('/pages/index/pre');
			break;
		default:
			break;
	}
}
</script>

<style lang="scss" scoped>
.panel {
	display: flex;
	flex-direction: column;
	justify-content: left;
	width: 100%;
	background-color: #FFFFFF;
	//padding: 10rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx ;
	box-shadow: 1px 1px 20px #ececec;
	border-radius: 20rpx;


	.title {
		border-left: 5rpx solid #FE000F;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin: 10rpx;
	}
}

.body {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 两列布局 */
	gap: 10rpx; /* 设置元素之间的间距 */
	justify-items: center; /* 水平方向居中 */
	align-items: center; /* 垂直方向居中 */
	box-shadow: 1px 1px 30px #eeeeee;
	border-radius: 20rpx;
	padding: 5rpx;
	margin: 10rpx 0;
	width: 99%;
}

.bg-colleize {
	background-image: url("https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/08/31a6d2c15b6cf248e781c099d3302de7241725110032845.png");
}

.bg-pre {
	background-image: url("https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/08/31b01aa418d5424d4d81208c09efb6eb541725105744150.png");
}

.bg-mercari {
	background-image: url("https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/08/31c505067ac2dc4192a683037a651f49d91725109746388.png");
}

.bg-out {
	background-image: url("https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/08/3157ac75ad50594c12ac95b1900acff5d81725107675397.png");
}

.section {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 165rpx;
	background-size: cover;
	box-shadow: 1px 1px 15px #dadada;
	border-radius: 10rpx;

	.bottom-text {
		font-size: 20rpx;
		margin-top: 5rpx;
		font-weight: bold;
		text-align: center;
	}
}

.circle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: white;
	border: 1px solid black;
}

.icon {
	width: 60rpx;
	height: 40rpx;
}
</style>
